<template>
  <q-dialog class="pie-dialog" v-model="show" persistent maximized>
    <q-card v-drag class="full-width full-height flex bg-white screen scroll scrollbar">
      <q-card-section class="row items-center q-pb-none full-width">
        <div class="text-h6 text-weight-bold">当班状态统计</div>
        <q-space />
        <q-btn @click="hideDialog" flat round size="sm" color="primary" icon="iconfont icontubiao-133">
          <q-tooltip>关闭</q-tooltip>
        </q-btn>
      </q-card-section>
      <q-card-section class="dialog-content">
        <div class="chart" ref="dialogChart"></div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import echarts from 'echarts'
import { secondToString } from '../../../assets/js/util'

export default {
  name: 'cur-status-dialog',
  props: {
    chartColor: {
      type: Object,
      default: () => {
        return {
          process: '#18D77F', // 加工
          stop: '#FF8559', // 停机
          breaks: '#999999', // 断开
          offLine: '#666666', // 离线
          alarm: '#E43434', // 报警
          changeLine: '#AC70F2', // 换线
          fault: '#F7B82D', // 故障
          repair: '#2BD0F7' // 维修
        }
      }
    },
    chartExplain: {
      type: Object,
      default: () => {
        return {
          process: '加工',
          stop: '停机',
          breaks: '断开',
          offLine: '离线',
          alarm: '报警',
          changeLine: '换线',
          fault: '故障',
          repair: '维修'
        }
      }
    }
  },
  data () {
    return {
      chartBgColor: {
        process: '#D0FFE9', // 加工
        stop: '#FFDCD0', // 停机
        breaks: '#EDEDED', // 断开
        offLine: '#E8E8E8', // 离线
        alarm: '#FFD7D7', // 报警
        changeLine: '#F2E6FF', // 换线
        fault: '#FFF3D7', // 故障
        repair: '#D8F8FF' // 维修
      },
      show: false,
      title: '',
      data: [],
      chartsData: [],
      chart: null,
      total: 0,
      type: 'percent'
    }
  },
  methods: {
    // 显示弹框
    showDialog (info, total, title, type) {
      this.show = true
      this.total = total
      this.title = title
      this.type = type
      this.$nextTick(() => {
        this.initInfo(info, type)
      })
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (info) {
      let data = []
      for (let key in info) {
        if (info[key] && info[key] > 0) {
          let item = {
            value: info[key],
            keyName: this.chartExplain[key],
            name: key
          }
          item.time = secondToString(info[key])
          data.push(item)
        }
      }
      data = data.map(item => {
        return {
          ...item,
          percent: item.value ? (item.value / this.total * 100).toFixed(1) : 0,
          value: parseInt(item.time)
        }
      })
      this.data = data
      this.chartsData = data.filter(item => item.value !== 0).sort(function (a, b) {
        return b.value - a.value
      })
      if (this.chartsData.length > 0) {
        this.setOption(this.chartsData)
      } else {
        this.setOption(this.data)
      }
    },
    setOption (data) {
      const bgData = data.map(item => {
        return {
          ...item,
          value: parseInt(data[0].time) * 100 / data[0].percent
        }
      })
      const option = {
        grid: {
          bottom: '10%',
          left: '10%',
          right: '5%',
          top: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: '',
            label: {
              show: false
            }
          },
          textStyle: {
            fontSize: 28
          },
          formatter: (params) => {
            let htmlStr = ''
            let value = params[1].data.time
            let color = this.chartColor[params[1].data.name]
            let name = params[1].data.keyName

            htmlStr += '<div style="display: flex;justify-content: center;align-items: center">'
            htmlStr += '<div style="display: inline-block;margin-right: 10px;width:28px;height:28px;border-radius:14px;line-height: 28px;background-color:' + color + ';"></div>'
            htmlStr += `${name}：` + value
            htmlStr += '</div>'
            return htmlStr
          }
        },
        xAxis: {
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#d3d3d3'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333' // X轴文字颜色
            },
            interval: 0
          },
          type: 'category',
          data: data.map(item => item.keyName)
        },
        yAxis: {
          type: 'value',
          name: '小时',
          nameTextStyle: {
            color: '#333333',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333'
            }
          },
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#d3d3d3'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#DDD'
            }
          }
        },
        series: [{
          data: data,
          type: 'bar',
          barWidth: 28,
          z: 20,
          itemStyle: {
            normal: {
              color: (params) => {
                return this.chartColor[params.data.name]
              },
              fontSize: 28,
              barBorderRadius: [14, 14, 0, 0]
            }
          },
          label: {
            show: true,
            lineHeight: 28,
            height: 28,
            position: [-2, -34],
            distance: 1,
            textStyle: {
              fontSize: 20
            },
            formatter: (params) => {
              return params.data.percent + '%'
            }
          }
        },
        {
          type: 'bar',
          z: 10,
          itemStyle: {
            normal: {
              color: (params) => {
                return this.chartBgColor[params.data.name]
              },
              barBorderRadius: [14, 14, 0, 0]
            }
          },
          silent: true,
          barWidth: 28,
          barGap: '-100%',
          data: bgData
        }
        ]
      }
      this.chart = echarts.init(this.$refs.dialogChart)
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .dialog-content{
    display flex
    justify-content center
    align-items center
  }
  .chart{
    width calc(100vw - 100px)
    height calc(100vh - 50px)
  }
  .explain{
    flex 144px 0
    margin-left 50px
    font-size 18px
    /*display flex*/
    /*flex-direction column*/
    /*justify-content center*/
    li{
      display inline-block
      width 50%
      &:nth-child(odd){
        margin-right 20px
      }
      .round{
        margin-right 10px
        display inline-block
        width 16px
        height 16px
        border-radius 8px
        vertical-align middle
      }
      .name{
        margin 19px 0 9px
      }
    }
  }
</style>
